<!--工单分析-->
<script setup>
import PieCharts from '@/components/Charts/PieCharts.vue'
import SwiperPieCharts from '@/components/Charts/SwiperPieCharts.vue'
import MCard from '@/components/MCard.vue'
import { chartsColors } from '@/utils/config.js'
import { useStatistics } from '@/composables/useStatistics.js'
import OverviewCard from '@/views/statistics/components/OverviewCard.vue'
import TypeTab from '@/views/statistics/components/TypeTab.vue'
import LineCharts from '@/components/Charts/LineCharts.vue'
import { usePermissionStore } from '@/stores/permission'
import { useStatisticsFromStore } from '@/stores/statistics.js'
const { user } = usePermissionStore()

const { statistics } = useStatisticsFromStore()
const {
  overviewData,
  statByLevelData,
  getOverviewData,
  getStatByLevelData,
  getStatByDayData,
  statByDayData,
  getStatStatBySourceData,
  statStatBySourceTagsData,
  statStatBySourceData,
  getStatStatByOrderData
} = useStatistics()
const pieChartSourceRef = ref(null)
const state = reactive({
  query: {
    areaCode: user.areaCode,
    ...statistics.timeSpendRank
  },
  tabs: [
    {
      name: '来源分析',
      value: 'all'
    },
    {
      name: '类别分析',
      value: 'wait'
    }
  ],
  activeName: 'all'
})

// 收起展开控制操作
const collapseStatus = ref(1)
const boxHeight = ref('85px')
const collapses = (t, h) => {
  boxHeight.value = h
  collapseStatus.value = t
}

const onLoadAllData = async () => {
  await getOverviewData(state.query)
  await getStatByDayData(state.query)
  await getStatByLevelData(state.query)
  await getStatStatBySourceData(state.query)
}

const changeTab = async (val) => {
  if (val === 'wait') {
    await getStatStatByOrderData(state.query)
  } else {
    await getStatStatBySourceData(state.query)
  }
}

watch(
  () => statistics,
  (newVal) => {
    state.query = newVal?.timeSpendRank
    onLoadAllData()
  },
  { deep: true }
)

onMounted(async () => {
  await onLoadAllData()
  console.log(overviewData.value)
})

const itemClick = (item) => {
  pieChartSourceRef.value.handleLabelClick(item)
}
</script>

<template>
  <div>
    <m-card title="数据总览">
      <OverviewCard :data="overviewData" />
    </m-card>
    <m-card title="趋势分析">
      <LineCharts eid="asdfgdfa" :data="statByDayData" />
    </m-card>
    <m-card title="级别占比分析">
      <PieCharts
        eid="gfhdf"
        v-if="
          statByLevelData?.seriesData && statByLevelData?.seriesData?.length
        "
        :data="statByLevelData"
      />
    </m-card>
    <m-card title="来源/类别分析">
      <TypeTab
        :tabs="state.tabs"
        @changeTab="changeTab"
        v-model="state.activeName"
      />
      <SwiperPieCharts
        ref="pieChartSourceRef"
        eid="asdfa"
        :data="statStatBySourceData"
      />
      <div
        :style="{ height: boxHeight, overflow: 'hidden' }"
        class="flex justify-start flex-wrap gap-10px m-t-[-10px]"
      >
        <div
          v-for="(item, index) in statStatBySourceTagsData"
          :key="index"
          style="flex-direction: column; flex: 0 0 31%"
          class="flex text-center"
          @click.stop="itemClick(item)"
        >
          <div class="text-#71747A text-12px font-400">
            <span
              :style="{ background: chartsColors[index] }"
              class="w-2.5 h-2.5 rounded-full m-r-2px inline-block"
            ></span
            >{{ item.label }}
          </div>
          <div class="text-#1E2226 text-14px font-400">{{ item.value }}件</div>
        </div>
      </div>
      <div
        @click="collapses(2, 'auto')"
        v-show="collapseStatus === 1"
        class="text-center m-t-10px text-14px font-500 text-#229F60"
      >
        展开<van-icon name="arrow-down" class="m-l-3px" color="#229F60" />
      </div>
      <div
        @click="collapses(1, '80px')"
        v-show="collapseStatus === 2"
        class="text-center m-t-10px text-14px font-500 text-#229F60"
      >
        收起<van-icon name="arrow-up" class="m-l-3px" color="#229F60" />
      </div>
    </m-card>

    <div class="h-100px"></div>
  </div>
</template>

<style scoped lang="less"></style>
